<template>
  <div class="wlh_header">
    <!-- 快捷导航模块（主页最顶部内容） -->
    <div class="shortcut">
      <div class="w">
        <div class="cut_left">
          <ul>
            <li>
              <router-link to="/login" v-if="$store.state.is_login == 0"
                >登录/注册</router-link
              >
              <span v-else
                ><router-link to="/Mine" target="_blank"
                  >欢迎:{{ $store.state.user_phone }}</router-link
                ></span
              >
            </li>
            <li class="down_load">
              <a href="#">婚礼纪APP <span></span></a>
              <div class="erweima">
                <img src="/img/wlh/erweima.png" alt="" />
                <p>新人下载，领取好礼</p>
              </div>
            </li>
          </ul>
        </div>
        <div class="cut_right">
          <ul>
            <li>
              <a href="https://www.haicaoyun.com" target="_blank">海草云</a>
            </li>
            <li>
              <a
                href="https://www.hunliji.com/p/frontend/merchant-center/dist/index.html#/home"
                target="_blank"
                >进入商家中心<img
                  class="shop"
                  src="/img/wlh/h.png"
                  title="商家中心"
              /></a>
            </li>
            <li><a href="#">婚礼现场</a></li>
            <li><a href="#">招聘</a></li>
            <li><a href="#">平台规则</a></li>
            <li><a href="#">|</a></li>
            <li><a href="#">客服：400-159-9090</a></li>
          </ul>
        </div>
      </div>
    </div>
    <div :class="{ header_fixed: show }">
      <div class="nav_top w">
        <div class="logo">
          <router-link to="/"
            ><img src="/img/wlh/logo.png" title="婚礼纪"
          /></router-link>
          <router-link class="country" to="/chooseCity"
            >{{ city_name }}<span></span></router-link
          >
        </div>
        <div class="nav" :class="{ nav_show }">
          <ul>
            <li><a href="#">首页</a></li>
            <li>
              <a href="#">视频</a> ·
              <a href="" target="blank">请帖 <span></span></a>
              <div>
                <img class="hot" src="/img/wlh/hot.png" alt="" />
              </div>
              <div class="hover_2">
                <p><a href="" target="blank">电子请帖</a></p>
                <p>
                  <a href="#">视频制作</a>
                  <img src="/img/wlh/h.png" alt="" />
                </p>
              </div>
            </li>
            <li><router-link to="/hotel">婚宴酒店</router-link></li>
            <li>
              <router-link to="/wrindex">结婚商城 <span></span></router-link>
              <div class="hover_4">
                <p><router-link to="/wrindex">结婚商城</router-link></p>
                <p><a href="#">旅拍商城</a></p>
              </div>
            </li>
            <li><router-link to="/shoppingindex">婚品采购</router-link></li>
            <li>
              <router-link to="/strategyindex"
                >结婚攻略 <span></span></router-link
              >
              <div class="hover_6">
                <p><router-link to="/strategyindex">结婚攻略</router-link></p>
                <p><a href="javascript:;">问答</a></p>
                <p><a href="javascript:;">新娘说</a></p>
              </div>
            </li>
            <li>
              <router-link to="/picHome" target="_blank"
                >婚礼美图 <span></span></router-link
              >
              <div class="hover_7">
                <p>
                  <router-link to="/picHome" target="_blank"
                    >婚礼美图</router-link
                  >
                </p>
                <p>
                  <router-link to="/video" target="_blank"
                    >婚礼视频</router-link
                  >
                </p>
              </div>
            </li>
          </ul>
        </div>
        <div class="search" :class="{ sousuo_width }">
          <input
            type="text"
            class="sousuo"
            :placeholder="text[text_i].text_content"
            @focus="nav_hidden1"
            @blur="nav_hidden2"
            v-model="sousuotext"
          />
          <div></div>
          <!-- 搜索框的下拉结果列表 -->
          <div class="xialatuijian" v-show="showResList && !show">
            <p class="tips">大家都在搜</p>
            <ul class="tips_list">
              <li
                class="tips_item"
                v-for="(item, i) of sousuoList"
                :key="i"
                @mousedown="jumpTTo(item.router_url)"
              >
                <router-link to="/hotel" target="_blank">{{
                  item.keyword
                }}</router-link>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
@import url(/css/header.css);
</style>
<script>
export default {
  data() {
    return {
      // 双向绑定搜索框的value
      sousuotext: "",
      // 搜索请求相应结果数组
      sousuoList: [
        { keyword: "有什么好的婚宴酒店", router_url: "/hotel" },
        { keyword: "结婚商城在哪里买", router_url: "/hotel" },
        { keyword: "如何制作结婚攻略", router_url: "/hotel" },
        { keyword: "婚礼美图展览", router_url: "/hotel" },
        { keyword: "婚检流程都有哪些,需要带什么资料", router_url: "/hotel" },
        { keyword: "结婚请帖如何制作", router_url: "/hotel" },
      ],
      city_name: "全国",
      showResList: false, //是否显示搜索结果下拉列表
      show: false, //保存是否在页面滚动时显示页头
      nav_show: false, //是否显示页头nav导航
      sousuo_width: false,
      text_i: 0, //保存轮播的搜索提示索引
      text: [{ text_content: "在这里搜点你想要的" }],

      // 搜索节流控制变量
      // Cansousuo: true,
      // 搜索防抖保存定时器
      timer: "",
    };
  },
  watch: {
    sousuotext() {
      this.sousuoFunction();
    },
  },
  mounted() {
    // 加载vuex中的city_name
    this.city_name = this.$store.state.city_name;
    // 监听页面滚动事件
    window.addEventListener("scroll", this.showSearch);
    // 调用热点搜索请求函数
    this.load_search_text();
    // 调用函数使得热点搜索词索引循环
    this.change_text_i();
  },
  methods: {
    // 搜索结果点击跳转事件
    jumpTTo(url) {
      console.log(url, typeof url);
      this.$router.push(url);
      console.log("点击跳转");
    },
    // 触发搜索点击事件
    sousuoFunction() {
      let keyword = this.sousuotext;
      // 1.防抖方式减小服务器端压力
      if (this.timer != undefined) {
        // console.log("清掉了上一个请求");
        clearTimeout(this.timer);
      }
      // console.log(timer);
      this.timer = setTimeout(() => {
        this.axios(`/Isearch/searchsomething?keyword=${keyword}`).then(
          (res) => {
            // 拿到服务端搜索响应结果用data保存
            this.sousuoList = res.data;
          }
        );
      }, 500);
      // 2.节流方式减小服务器端压力
      /* if (this.Cansousuo === true) {
        this.axios(`/Isearch/searchsomething?keyword=${keyword}`).then(
          (res) => {
            // 拿到服务端搜索响应结果用data保存
            this.sousuoList = res.data;
          }
        );
        this.Cansousuo = false;
        setTimeout(() => {
          this.Cansousuo = true;
        }, 2000);
      } */
    },
    //页面滚动页头固定事件
    showSearch() {
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 36) {
        // 当页面滚动到高度300px处，动态绑定class 来设置头部固定定位
        this.show = true;
        // 顺便控制输入框的大小和nav的显示和隐藏
        this.nav_show = true;
        this.sousuo_width = true;
      } else {
        this.show = false;
        this.nav_show = false;
        this.sousuo_width = false;
      }
    },
    // 获取焦点导航隐藏
    nav_hidden1() {
      this.nav_show = true;
      this.sousuo_width = true;
      this.showResList = true;
    },
    nav_hidden2() {
      this.nav_show = false;
      this.sousuo_width = false;
      this.showResList = false;
    },
    // 封装请求搜索热点提示的函数
    load_search_text() {
      this.axios.get("/search/search_rec").then((res) => {
        this.text = res.data;
      });
    },
    // 让索引动起来
    change_text_i() {
      setInterval(() => {
        if (this.text_i < 4) {
          this.text_i++;
        } else {
          this.text_i = 0;
        }
      }, 5000);
    },
  },
};
</script>
<style scoped>
/* 导航栏一旦随着页面滚动36px那么就固定定位页头导航栏 */
.header_fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background-color: #fff;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2);
  /* transition: all 0.5s ease; */
}
/* 一旦点击搜索框就隐藏nav导航失去焦点就重新显示 */
.nav_show {
  display: none !important;
}
.sousuo_width {
  width: 500px !important;
}
.sousuo_width .sousuo {
  width: 460px !important;
}
</style>